<template>
  <div class="app-container">
    <el-row style="width: 86.3%; top: 6px; z-index: 999; position: fixed">
      <el-col :span="17" class="card-box">
        <div style="display: flex; justify-content: space-between">
          <listAllChannel @getsalesGrade="getsalesGrade" />
        </div>
      </el-col>

      <!-- <el-col :span="7">
        <date
          v-model="valueTime"
          :type.sync="groupType"
          @handleChangeTime="handleChangeTime($event)"
        ></date>
      </el-col> -->
    </el-row>
    <!-- style="margin-top: 16px" -->
    <el-dialog
      :visible.sync="openInfo"
      width="1000px"
      height="600px"
      append-to-body
      v-if="openInfo"
    >
      <vebarI :chartData="echartDataSkuII" />
    </el-dialog>

    <el-row :gutter="20" style="margin-bottom: 16px">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}评价分布分析(点击联动)</span
            >
            <!-- @change="init" -->
            <el-button
              style="margin-left: 5px"
              type="primary"
              size="mini"
              @click="openInfo = true"
              >查看完整数据</el-button
            >
          </div>
          <vebar :chartData="echartDataSku" @vchartData="vchartData" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}评价数据总览（按平台/店）</span
            >
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExportI"
              >导出</el-button
            >
          </div>
          <tableI :tableDataList="tableDataI" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i
              >{{
                inputValue ? inputValue + " " : query.salesGrade + " "
              }}
              评价分布</span
            >
          </div>
          <PieChart
            :chartData="PieChartData"
            id="PieChartData"
            :height="'400px'"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ query.salesGrade + " " }}差评排名
            </span>
          </div>
          <histogram :chartData="echartDataSkuI" />
          <!-- <wordCloud :chartsData="chartsData" /> -->
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{
            inputValue ? inputValue + " " : query.salesGrade + " "
          }}评价数据总览（按时间周期）</span
        >
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportII"
          >导出</el-button
        >
      </div>
      <tableI :tableDataList="tableDataII" />
    </el-card>
    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{ query.salesGrade + " " }}差评走势分析</span
        >
      </div>
      <div
        style="margin-left: 2px; margin-right: 2px; height: 410px"
        ref="salesQuantity"
      ></div>
    </el-card>
    <el-row :gutter="20" style="margin-top: 16px">
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ inputValue ? inputValue + " " : query.salesGrade + " " }}
              差评分类数据</span
            >
            <!-- <el-radio-group
              v-model="commentType"
              size="mini"
              @change="getselectNegativeCommentSecond"
            >
              <el-radio-button
                v-for="(item, index) in commentTypeArr"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group> -->
          </div>
          <el-table :height="350" :data="SecondData" style="width: 100%" border>
            <el-table-column prop="propertyValue" label="评论原因">
            </el-table-column>
            <el-table-column prop="propertyValueCount" label="数量">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            style="display: flex; justify-content: space-between"
          >
            <span
              ><i class="el-icon-collection"></i>
              {{ inputValue ? inputValue + " " : query.salesGrade + " " }}
              差评原因分类占比</span
            >
          </div>
          <PieChart :chartData="PieChartDataI" id="PieChartDataI" /> </el-card
      ></el-col>
    </el-row>

    <el-card style="margin-top: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span
          ><i class="el-icon-collection"></i>
          {{
            inputValue ? inputValue + " " : query.salesGrade + " "
          }}差评原因分类统计（按平台/店）</span
        >
        <span>
          <el-select
            style="width: 300px"
            v-model="shopList"
            placeholder="平台"
            @change="getselectNegativeCommentData"
            multiple
          >
            <el-option
              v-for="(dict, i) in CategoryList"
              :key="i"
              :label="dict"
              :value="dict"
            />
          </el-select>

          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportIII"
            >导出</el-button
          >
        </span>
      </div>
      <tableI :tableDataList="tableDataIII" />
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCommentsChannelStatistics,
  selectCommentsDistributionOne,
  selectChannelCommentsDistribution,
  selectNegativeCommentSecond,
  selectChannelCommentData,
  selectNegativeCommentData,
} from "@/api/comment/BiCommentFirstDwd";
// import KoiCardI from "./zindex/KoiCardI.vue";
// import wordCloud from "./zindex/wordCloud.vue";
import histogram from "./zindex/histogram.vue";
import vebar from "./zindex/vebar.vue";
import vebarI from "./zindex/vebarI.vue";
import tableI from "./zindex/table.vue";
import PieChart from "./components/PieChart";
import date from "./common/date";
import listAllChannel from "./components/listAllChannel";
export default {
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    date,
    listAllChannel,
    PieChart,
    vebar,
    vebarI,
    histogram,
    tableI,
  },
  data() {
    return {
      shopList: [],
      inputValue: "",
      CategoryList: [],
      tableDataI: [],
      tableDataII: [],
      tableDataIII: [],
      SecondData: [],
      PieChartDataI: {},
      PieChartData: {},

      chartsData: [],
      echartDataSku: {},
      echartDataSkuI: {},
      echartDataSkuII: {},
      openInfo: false,
      queryParams: {},
      //按时间周期tableDataII的参数
      queryParamsII: {},
      commentType: "差评",
      commentTypeArr: [
        { value: "差评", label: "差评" },
        { value: "好评", label: "好评" },
        // { value: "近1年", label: "近1年" },
      ],

      //时间控件
      valueTime: new Date(new Date().setDate(new Date().getDate() - 1)),
      groupType: "date",
      //时间控件
      timeObj: {},

      // query: {
      //   salesGrade: [],
      //   // dateType: "近30天",
      //   startDate: "",
      //   endDate: "",
      //   dateType: "",
      //   // channelType: "shop",
      // },
      // 店铺
      cascadeList: [],
    };
  },
  created() {},
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.query.channelType = "shop";
        this.getselectChannelCommentData("allquery");
        this.gettableDataII();
        this.getselectNegativeCommentData();
        this.getselectChannelCommentsDistribution();
        this.getbad("差评");
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //选完时间后发请求
    handleChangeTime(timeObj) {
      if (!timeObj.endTime) {
        return;
      }
      this.query.startDate = timeObj.startTime;
      this.query.endDate = timeObj.endTime;
      this.query.dateType = timeObj.dateType;

      this.query.channelType = "shop";
      this.getselectChannelCommentData("allquery");

      this.getselectNegativeCommentData();
      this.getselectChannelCommentsDistribution();
      this.getbad("差评");
    },
    //
    getsalesGrade(type) {
      this.query.salesGrade = type;

      this.query.channelType = "shop";

      this.getselectChannelCommentData("allquery");

      this.getselectNegativeCommentData();
      this.getselectChannelCommentsDistribution();
      this.getbad("差评");
      // if (type.length == 1) {
      //   this.query.channelType = "brand";
      // } else if (type.length == 2) {
      //   this.query.channelType = "channel";
      // } else if (type.length == 3) {
      //   this.query.channelType = "shop";
      // }
    },
    getselectNegativeCommentData() {
      selectNegativeCommentData({
        ...this.query,
        commentType: this.commentType,
        shopList: this.shopList,
        channelType: "shop",
      }).then((response) => {
        this.tableDataIII = response;
      });
    },
    gettableDataII() {
      this.queryParamsII = {
        startDate: this.query.startDate,
        endDate: this.query.endDate,
        dateType: this.query.dateType,
        salesGrade: this.query.salesGrade,
        inputValue: this.inputValue,
      };
      selectChannelCommentData(this.queryParamsII).then((response) => {
        this.tableDataII = response;
      });
    },
    getselectChannelCommentData(allquery) {
      if (!allquery) {
        return;
      }
      selectChannelCommentData(this.query).then((response) => {
        this.tableDataI = response;
      });
    },
    getselectNegativeCommentSecond(obj) {
      selectNegativeCommentSecond({
        commentType: this.commentType,
        ...obj,
      }).then((response) => {
        this.SecondData = response;
        this.PieChartDataI = {
          xData: [],
          female: [],
        };
        this.PieChartDataI.xData = response.map((item) => item.propertyValue);
        this.PieChartDataI.female = response.map((item) => {
          // 从当前项中提取 propertyValue 和 propertyValueCount
          const name = item.propertyValue;
          const value = item.propertyValueCount; // 将字符串转换为整数

          // 返回一个包含 name 和 value 的新对象
          return { name, value };
        });
      });
    },
    getselectChannelCommentsDistribution() {
      // let obj = {
      //   startDate: this.query.startDate,
      //   endDate: this.query.endDate,
      //   dateType: this.query.dateType,

      // };
      selectChannelCommentsDistribution(this.query).then((response) => {
        this.CategoryList = response.map((item) => item.dataDateUnit);
        console.log(JSON.stringify(this.CategoryList));
        this.inputValue = "";
        this.query.channelType = "";

        this.vchartData();

        this.echartDataSku = {
          columns: [],
          rows: [],
        };
        this.echartDataSku.rows = response.slice(0, 10).map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });

        this.echartDataSku.columns = Object.keys(this.echartDataSku.rows[0]);

        this.echartDataSkuII = {
          columns: [],
          rows: [],
        };
        this.echartDataSkuII.rows = response.map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });

        this.echartDataSkuII.columns = Object.keys(
          this.echartDataSkuII.rows[0]
        );
      });
    },
    getbad(bad) {
      // let obj = {
      //   startDate: this.query.startDate,
      //   endDate: this.query.endDate,
      //   dateType: this.query.dateType,

      // };
      selectChannelCommentsDistribution({
        commentType: bad,
        ...this.query,
      }).then((response) => {
        this.inputValue = "";
        this.query.channelType = "";

        // this.vchartData();

        this.echartDataSkuI = {
          columns: [],
          rows: [],
        };
        this.echartDataSkuI.rows = response.map((item) => {
          // 解构出dataDateUnit和keywordProperty对象
          const { dataDateUnit, keywordProperty } = item;

          // 合并dataDateUnit和keywordProperty中的属性到一个新对象
          return {
            dataDateUnit,
            ...keywordProperty,
          };
        });
        // console.log("111");
        // console.log(JSON.stringify(this.echartDataSkuI.rows));

        this.echartDataSkuI.columns = Object.keys(this.echartDataSkuI.rows[0]);
      });
    },
    //点击的时间
    vchartData(secondLevelColumn) {
      if (secondLevelColumn) {
        this.inputValue = secondLevelColumn;
        this.query.channelType = "shop";
      }
      let obj = {
        ...this.query,
        inputValue: this.inputValue,
      };
      this.getselectCommentsDistributionOne(obj);
      this.getselectCommentsChannelStatistics("salesQuantity", obj);
      this.getselectNegativeCommentSecond(obj);
      this.gettableDataII();
    },
    getselectCommentsDistributionOne(obj) {
      selectCommentsDistributionOne(obj).then((response) => {
        this.PieChartData = {
          xData: [],
          female: [],
        };
        this.PieChartData.xData = response.map((item) => item.commentType);
        this.PieChartData.female = response.map((item) => {
          // 从当前项中提取 propertyValue 和 propertyValueCount
          const name = item.commentType;
          const value = item.commentQuantity; // 将字符串转换为整数

          // 返回一个包含 name 和 value 的新对象
          return { name, value };
        });
      });
    },
    getselectCommentsChannelStatistics(property, obj) {
      // let obj = {
      //   startDate: this.query.startDate,
      //   endDate: this.query.endDate,
      //   dateType: this.query.dateType,
      //   salesGrade: this.query.salesGrade,
      // };
      selectCommentsChannelStatistics({ commentType: "差评", ...obj }).then(
        (response) => {
          let order = { date: [], data: [] };
          order.date = response.map((item) => item.dataDateUnit);
          response.forEach((item) => {
            order.data.push(item.keywordProperty);
          });
          const xData = order.date;

          console.log(JSON.stringify(order.data));
          const keyArray = Object.keys(order.data[0]);
          const series = [];
          keyArray.forEach((key) => {
            series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "line",
            });
          });

          const option = {
            grid: {
              left: "5%",
              top: "10%",
              right: "2%",
              bottom: "10%",
            },
            // 提示框
            tooltip: { trigger: "axis" },
            xAxis: {
              data: xData,
            },
            yAxis: {},
            legend: {
              data: keyArray,
            },
            series,
          };

          const E = echarts.init(this.$refs[property]);

          E.setOption(option);
        }
      );
    },
    // handleGo(path) {
    //   this.$router.push({
    //     path: path,
    //   });
    // },
    handleExportI() {
      this.query.channelType = "shop";
      this.download(
        "comment/BiCommentFirstDwd/selectChannelCommentDataExport",
        {
          ...this.query,
        },
        `handleExportI_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExportII() {
      this.download(
        "comment/BiCommentFirstDwd/selectChannelCommentDataExport",
        {
          ...this.queryParamsII,
        },
        `handleExportII_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExportIII() {
      this.download(
        "comment/BiCommentFirstDwd/selectNegativeCommentDataExport",
        {
          ...this.query,
          commentType: this.commentType,
          shopList: this.shopList,
          channelType: "shop",
        },
        `handleExportIII_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
</style>